<!DOCTYPE html>
<html>
    <head>
        <style>
            .test { float: left; margin-right: 25px; }
            .box { height: 50px; width: 50px; }
            .gray { background: rgb(200, 200, 200); }
            .grayer { background: rgb(80, 80, 80); }
            .grayest { background: rgb(0, 0, 0); }
        </style>
    </head>
<body>
    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; z-index: 5;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: 10px; position: absolute; top: 20px; z-index: 5;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px; position: absolute; opacity: 0.999;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: 20px; position: relative; opacity: 0.999;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>

    <div class="test grayest box">
        <div class="grayer box" style="margin-left: 10px; margin-top: 10px;"></div>
        <div class="gray box" style="margin-left: 20px; margin-top: -40px;"></div>
    </div>
</body>
</html>
